<script setup>


import ListApis from "@/apis/list.js";

import config from "@/config/index.js";
import RightIcon from "@/components/common/RightIcon.vue";
import useUserStore from '@/stores/user.js'
import useCookieStore from '@/stores/cookieStorage.js'
import MaterialApis from "@/apis/material.js";
import {ElMessage} from "element-plus";
import {useRouter,useRoute} from "vue-router";

const router = useRouter()
const route=useRoute()
const industriesAndExams = ref([])
const industries = ['jiangonglei', 'caikuailei', 'zhicheng']
const activeIndex = ref(0)
const userStore = useUserStore();
const cookieStore = useCookieStore();
const freeGrade = [{
  name: '免费'
}, {
  name: '付费班级独享'
}]
const gradeActiveIndex = ref(0)
const activeIndex1 = ref(0)
const items1 = ['最新', '推荐', '我可下载的资料']
const select1 = ref(null)
const options1 = ref([])
const isLogin = computed(() => {
  return cookieStore.isLogin;
})
// 不分页
const materialList = ref({
  current: 1,
  size: 1000,
  total: 0,
  records: []
})
const hotInformation=ref([])

const freeMaterialList = computed(() => {
  return materialList.value.records.filter(item => {
    return item.freeFlag
  })
})
const notFreeMaterialList = computed(() => {
  return materialList.value.records.filter(item => {
    return !item.freeFlag
  })
})
const recommendMaterialList=computed(() => {
  return materialList.value.records.filter(item => {
    return item.recommend
  })
})

async function init() {
  const industryRes = await getIndustries();
  industriesAndExams.value = industryRes.data.filter(item => industries.includes(item.id));
  if (industriesAndExams.value.length) {
    if(!route.query.examId){
      getExams(industriesAndExams.value[0].id).then(res => {

        industriesAndExams.value[0].children = res.data
        industriesAndExams.value[0].activeIndex = 0
        getHotInformation()
        if (!res.data.length) return;
        //  获取科目
        ListApis.leafListPc({
          params: {
            examId: res.data[0].id,
          }
        }).then(res1 => {
          industriesAndExams.value[0].children[0].activeIndex = 0
          industriesAndExams.value[0].children[0].children = res1.data
          if (!res1.data.length) return;
          ListApis.columnByCategory({
            params: {
              categoryId: res1.data[0].id,
              columnPosition: 'JGQY',
              type: 1,
            }
          }).then(res2 => {
            industriesAndExams.value[0].children[0].children[0].activeIndex = 0
            industriesAndExams.value[0].children[0].children[0].children = res2.data

            if (res2.data.length) {
              //   获取最新资料
              ListApis.materialByColumnId({
                params: {
                  industryCode: industriesAndExams.value[0].id,
                  examId: industriesAndExams.value[0].children[0].id,
                  categoryId: industriesAndExams.value[0].children[0].children[0].id,
                  columnId: res2.data[0].id,
                  current: 1,
                  size: materialList.value.size
                }
              }).then(res => {
                const {current, total, records, size} = res.data
                materialList.value.current = current
                materialList.value.total = total
                materialList.value.records = records
                materialList.value.size = size
              })
            }
          })
        })
      })
    }else{
      let industryIndex;
      const item = industriesAndExams.value.find((item,index) => {
        if(item.id == route.query.industryId){
          industryIndex=index;
          return true;
        }
      })

      activeIndex.value=industryIndex


      getExams(item.id).then(res => {

        industriesAndExams.value[industryIndex].children = res.data
        industriesAndExams.value[industryIndex].activeIndex = res.data.findIndex(e=>{
          return e.id == route.query.examId;
        })
        getHotInformation()
        if (!res.data.length) return;
        //  获取科目
        ListApis.leafListPc({
          params: {
            examId: res.data[industriesAndExams.value[industryIndex].activeIndex].id,
          }
        }).then(res1 => {
          industriesAndExams.value[industryIndex].children[industriesAndExams.value[industryIndex].activeIndex].activeIndex = 0
          industriesAndExams.value[industryIndex].children[industriesAndExams.value[industryIndex].activeIndex].children = res1.data
          if (!res1.data.length) return;
          ListApis.columnByCategory({
            params: {
              categoryId: res1.data[0].id,
              columnPosition: 'JGQY',
              type: 1,
            }
          }).then(res2 => {
            industriesAndExams.value[industryIndex].children[industriesAndExams.value[industryIndex].activeIndex].children[0].activeIndex = 0
            industriesAndExams.value[industryIndex].children[industriesAndExams.value[industryIndex].activeIndex].children[0].children = res2.data

            if (res2.data.length) {
              //   获取最新资料
              ListApis.materialByColumnId({
                params: {
                  industryCode: industriesAndExams.value[industryIndex].id,
                  examId: industriesAndExams.value[industryIndex].children[industriesAndExams.value[industryIndex].activeIndex].id,
                  categoryId: industriesAndExams.value[industryIndex].children[industriesAndExams.value[industryIndex].activeIndex].children[0].id,
                  columnId: res2.data[0].id,
                  current: 1,
                  size: materialList.value.size
                }
              }).then(res => {
                const {current, total, records, size} = res.data
                materialList.value.current = current
                materialList.value.total = total
                materialList.value.records = records
                materialList.value.size = size
              })
            }
          })
        })
      })
    }
  }
}

function getExams(industryId) {
  return ListApis.examByIndustry({
    params: {
      size: 1000,
      industryId,
    },
  })
}

function getIndustries() {
  return ListApis.industryList()
}

function toggleGrade(index) {
  gradeActiveIndex.value = index
//   筛选是否免费
}

function toggleIndex(index) {
  if (activeIndex.value == index) return;
  activeIndex.value = index
  if (industriesAndExams.value[index].children) {
    industriesAndExams.value[index].activeIndex = 0
    getHotInformation()
    if (industriesAndExams.value[index].children.length)
      industriesAndExams.value[index].children[0].activeIndex = 0;
    if (industriesAndExams.value[index].children[0].children && industriesAndExams.value[index].children[0].children.length) {
      industriesAndExams.value[index].children[0].children[0].activeIndex = 0
      ListApis.materialByColumnId({
        params: {
          industryCode: industriesAndExams.value[index].id,
          examId: industriesAndExams.value[index].children[0].id,
          categoryId: industriesAndExams.value[index].children[0].children[0].id,
          columnId: industriesAndExams.value[index].children[0].children[0].children[0].id,
          current: 1,
          size: materialList.value.size
        }
      }).then(res => {
        const {current, total, records, size} = res.data
        materialList.value.current = current
        materialList.value.total = total
        materialList.value.records = records
        materialList.value.size = size
      })
    }


    return;
  }
  getExams(industriesAndExams.value[index].id).then(res => {
    industriesAndExams.value[index].children = res.data
    industriesAndExams.value[index].activeIndex = 0
    getHotInformation()
    if (!res.data.length) return;
    //  获取科目
    ListApis.leafListPc({
      params: {
        examId: res.data[0].id,
      }
    }).then(res1 => {
      industriesAndExams.value[index].children[0].activeIndex = 0
      industriesAndExams.value[index].children[0].children = res1.data
      if (!res1.data.length) return;
      ListApis.columnByCategory({
        params: {
          categoryId: res1.data[0].id,
          columnPosition: 'JGQY',
          type: 1,
        }
      }).then(res2 => {
        industriesAndExams.value[index].children[0].children[0].activeIndex = 0
        industriesAndExams.value[index].children[0].children[0].children = res2.data
        if (res2.data.length) {
          ListApis.materialByColumnId({
            params: {
              industryCode: industriesAndExams.value[index].id,
              examId: industriesAndExams.value[0].children[0].id,
              categoryId: industriesAndExams.value[0].children[0].children[0].id,
              columnId: res2.data[0].id,
              current: 1,
              size: materialList.value.size
            }
          }).then(res => {
            const {current, total, records, size} = res.data
            materialList.value.current = current
            materialList.value.total = total
            materialList.value.records = records
            materialList.value.size = size
          })
        }

      })
    })
  })
}

function toggleExam(index, item) {
  if (item.activeIndex == index) return;
  item.activeIndex = index
  getHotInformation()
  if (item.children[index].children) {
    item.children[index].activeIndex = 0
    if (item.children[index].children.length) {
      item.children[index].children[0].activeIndex = 0;
      ListApis.materialByColumnId({
        params: {
          industryCode: industriesAndExams.value[activeIndex.value].id,
          examId: item.children[index].id,
          categoryId: item.children[index].children[0].id,
          columnId: item.children[index].children[0].children[0].id,
          current: 1,
          size: materialList.value.size
        }
      }).then(res => {
        const {current, total, records, size} = res.data
        materialList.value.current = current
        materialList.value.total = total
        materialList.value.records = records
        materialList.value.size = size
      })
    }

    return
  }
  ;
  ListApis.leafListPc({
    params: {
      examId: item.children[index].id,
    }
  }).then(res1 => {
    // 重置科目
    item.children[index].activeIndex = 0
    item.children[index].children = res1.data
    if (!res1.data.length) return;
    // 重置栏目
    item.children[index].children[0].activeIndex = 0

    ListApis.columnByCategory({
      params: {
        categoryId: item.children[index].children[0].id,
        columnPosition: 'JGQY',
        type: 1,
      }
    }).then(res2 => {
      item.children[index].children[0].children = res2.data
      if (res2.data.length) {
        ListApis.materialByColumnId({
          params: {
            industryCode: industriesAndExams.value[activeIndex.value].id,
            examId: item.children[index].id,
            categoryId: item.children[index].children[0].id,
            columnId: res2.data[0].id,
            current: 1,
            size: materialList.value.size
          }
        }).then(res => {
          const {current, total, records, size} = res.data
          materialList.value.current = current
          materialList.value.total = total
          materialList.value.records = records
          materialList.value.size = size
        })
      }

    })
  })
}

function toggleCategory(index, item) {
  if (item.activeIndex == index) return;
  item.activeIndex = index
  if (item.children[index].children) {
    item.children[index].activeIndex = 0

    ListApis.materialByColumnId({
      params: {
        industryCode: industriesAndExams.value[activeIndex.value].id,
        examId: industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].id,
        categoryId: item.children[index].id,
        columnId: item.children[index].children[0].id,
        current: 1,
        size: materialList.value.size
      }
    }).then(res => {
      const {current, total, records, size} = res.data
      materialList.value.current = current
      materialList.value.total = total
      materialList.value.records = records
      materialList.value.size = size
    })
    return
  }
  ;
  ListApis.columnByCategory({
    params: {
      categoryId: item.children[index].id,
      columnPosition: 'JGQY',
      type: 1,
    }
  }).then(res2 => {
    item.children[index].activeIndex = 0
    item.children[index].children = res2.data

    ListApis.materialByColumnId({
      params: {
        industryCode: industriesAndExams.value[activeIndex.value].id,
        examId: industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].id,
        categoryId: item.children[index].id,
        columnId: res2.data[0].id,
        current: 1,
        size: materialList.value.size
      }
    }).then(res => {
      const {current, total, records, size} = res.data
      materialList.value.current = current
      materialList.value.total = total
      materialList.value.records = records
      materialList.value.size = size
    })
  })
}

function toggleColumn(index, item) {
  item.activeIndex = index

  ListApis.materialByColumnId({
    params: {
      industryCode: industriesAndExams.value[activeIndex.value].id,
      examId: industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].id,
      categoryId: item.id,
      columnId: item.children[index].id,

      current: 1,
      size: materialList.value.size
    }
  }).then(res => {
    const {current, total, records, size} = res.data
    materialList.value.current = current
    materialList.value.total = total
    materialList.value.records = records
    materialList.value.size = size
  })

}

function toggleIndex1(index) {
  activeIndex1.value = index
}

function download(item, index) {
  fetch(config.prefix_image + item.attachmentInfos[0].path, {
    method: 'GET',
  })
      .then(response => response.blob())
      .then(blob => {
        // 创建一个虚拟的链接元素，模拟点击下载
        const link = document.createElement('a');
        link.style.display = 'none';
        const url = window.URL.createObjectURL(blob);
        link.href = url;
        link.download = item.attachmentInfos[0].name;
        document.body.appendChild(link);

        // // 模拟点击
        link.click();
        // // 移除虚拟链接元素
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url)


        MaterialApis.addFrequency({
          type: 'download_time',
          id: item.id
        })
      })
}

function goToLogin(){
  router.push('/login')
}
function goResource() {
// 我已购买的资料
  if(isLogin.value){
    router.push({
      path: '/mine/material',

    })
  }
}
function getHotInformation(){
  MaterialApis.infoList({
    params: {
      type: 0,
      num: 100,
      examId:industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].id
    }
  }).then(res=>{
    hotInformation.value = res.data||[]
  })
}
function like(item){
  MaterialApis.updateLike({
    id: item.id,
    type:0,
    categoryId:industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].children[industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].activeIndex].id
  }).then(res => {

    ElMessage({
      message:"点赞成功",
      type:"success"
    })
  })
}
function previewPdf(item){
  if(item.attachmentInfos[0].path.indexOf(".pdf")==-1){
    ElMessage({
      message:"暂不支持非pdf预览",
      type:"warning"
    })
    return;
  }
  window.open(config.prefix_image + item.attachmentInfos[0].path,"_blank")
}
function goToBuy(item){
//   跳转考试下套餐页面
  router.push({
    path:"/",
    hash:"#industry"+activeIndex.value,
    query:{
      industryIndex:activeIndex.value,
      // industryIndex:2,
      examIndex:industriesAndExams.value[activeIndex.value].activeIndex,
      // examIndex:0,
    }
  })
}
init()


</script>

<template>
  <div>
    <div class="top1"></div>
    <div class="content1">
      <div class="the-left">
        <div class="the-title1">
          <span
              v-if="industriesAndExams&&industriesAndExams[activeIndex]&&industriesAndExams[activeIndex].children&&industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex]">{{
              industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].name
            }}</span>
        </div>
        <div class="the-box1">
          <div class="aa">
            <div class="bb">大类</div>
            <div class="cc">
              <div @click="toggleIndex(index)" v-for="(item,index) in industriesAndExams" :key="index" class="dd"
                   :class="{active:activeIndex==index}">
                {{ item.name }}
              </div>
            </div>

          </div>
          <div class="aa">
            <div class="bb">考试</div>
            <div class="cc" v-if="industriesAndExams[activeIndex]">
              <div @click="toggleExam(index,industriesAndExams[activeIndex])"
                   v-for="(item,index) in industriesAndExams[activeIndex].children" :key="index" class="dd"
                   :class="{active:industriesAndExams[activeIndex].activeIndex==index}">
                {{ item.name }}
              </div>
            </div>

          </div>
          <div class="aa">
            <div class="bb">科目</div>
            <div class="cc"
                 v-if="industriesAndExams[activeIndex]&&industriesAndExams[activeIndex].children&&industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex]">
              <div
                  @click="toggleCategory(index,industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex])"
                  v-for="(item,index) in industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].children"
                  :key="index" class="dd"
                  :class="{active:industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].activeIndex==index}">
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="aa">
            <div class="bb">类型</div>
            <div class="cc"
                 v-if="industriesAndExams[activeIndex]&&industriesAndExams[activeIndex].children&&industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex]&&industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].children&&industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].children[industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].activeIndex]">
              <div
                  @click="toggleColumn(index,industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].children[industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].activeIndex])"
                  v-for="(item,index) in industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].children[industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].activeIndex].children"
                  :key="index" class="dd"
                  :class="{active:industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].children[industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].activeIndex].activeIndex==index}">
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="aa">
            <div class="bb">等级</div>
            <div class="cc">
              <div @click="toggleGrade(index)" v-for="(item,index) in freeGrade" :key="index" class="dd"
                   :class="{active:gradeActiveIndex==index}">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <div class="the-title2">
          <div class="container1">
            <div class="left1">
              <span @click="toggleIndex1(index)" v-for="(item,index) in items1" :key="index" class="text1"
                    :class="{active:activeIndex1==index}">{{ item }}</span>
            </div>
            <div class="right1">
<!--              <el-select-->
<!--                  v-model="select1"-->
<!--                  placeholder="全部批次"-->
<!--                  size="small"-->
<!--                  style="width: 200px"-->
<!--              >-->
<!--                <el-option-->
<!--                    v-for="item in options1"-->
<!--                    :key="item.value"-->
<!--                    :label="item.label"-->
<!--                    :value="item.value"-->
<!--                />-->
<!--              </el-select>-->
            </div>
          </div>
        </div>
          <el-scrollbar height="800">
            <div class="scroll-container1" v-if="activeIndex1==0">
              <div class="flex-item" v-for="(item5,index5) in materialList.records" :key="index5">
                <div class="the-left">
                  <div class="the-left-flex">
                    <span class="the-left-text1">{{ item5.title }}</span>
                  </div>
                  <div class="the-left-flex">
                    <span class="tips2" v-if="item5.freeFlag">免费</span>
                    <span class="the-left-text2" v-if="item5.likeTime"><span>点赞数：{{ item5.likeTime }}</span></span>
                    <span class="the-left-text2" v-if="item5.watchTime"><span>观看数：{{ item5.watchTime }}</span></span>
                    <span class="the-left-text2" v-if="item5.downloadTime"><span>下载数：{{ item5.downloadTime }}</span></span>
                  </div>
                </div>
                <div class="the-right-btn" v-if="item5.freeFlag">
                  <el-button class="my-btn1" @click="like(item5)" type="primary" round>点赞</el-button>
                  <el-button class="my-btn1" v-if="item5.freeFlag" @click="previewPdf(item5)" type="primary" round>查看</el-button>
                  <el-button class="my-btn1" v-if="item5.freeFlag" @click="download(item5)" type="primary" round>下载</el-button>

                </div>
                <div class="the-right-btn" v-else>
                  <el-button class="my-btn1" @click="like(item5)" type="primary" round>点赞</el-button>
                  <el-button class="my-btn1" @click="goToBuy(item5)" type="primary" round>购买</el-button>
                </div>
              </div>
            </div>
            <div class="scroll-container1" v-else-if="activeIndex1==1">
              <div class="flex-item" v-for="(item5,index5) in recommendMaterialList" :key="index5">
                <div class="the-left">
                  <div class="the-left-flex">
                    <span class="tips1">推荐</span>
                    <span class="the-left-text1">{{item5.title}}</span>
                  </div>
                  <div class="the-left-flex">
                    <span class="tips2" v-if="item5.freeFlag">免费</span>
                    <span class="the-left-text2" v-if="item5.likeTime"><span>点赞数：{{ item5.likeTime }}</span></span>
                    <span class="the-left-text2" v-if="item5.watchTime"><span>观看数：{{ item5.watchTime }}</span></span>
                    <span class="the-left-text2" v-if="item5.downloadTime"><span>下载数：{{ item5.downloadTime }}</span></span>
                  </div>
                </div>
                <div class="the-right-btn">
                  <el-button class="my-btn1" @click="like(item5)" type="primary" round>点赞</el-button>
                  <el-button class="my-btn1" v-if="item5.freeFlag" @click="download(item5)" type="primary" round>下载</el-button>
                  <el-button class="my-btn1" @click="goToBuy(item5)" type="primary" round v-else>购买</el-button>
                </div>
              </div>
            </div>
            <div class="scroll-container1" v-else-if="activeIndex1==2">
              <div class="flex-item" v-for="(item5,index5) in freeMaterialList" :key="index5">
                <div class="the-left">
                  <div class="the-left-flex">
                    <span class="tips1" v-if="item5.recommend">推荐</span>
                    <span class="the-left-text1">{{ item5.title }}</span>
                  </div>
                  <div class="the-left-flex">
                    <span class="tips2" v-if="item5.freeFlag">免费</span>
                    <span class="the-left-text2" v-if="item5.likeTime"><span>点赞数：{{ item5.likeTime }}</span></span>
                    <span class="the-left-text2" v-if="item5.watchTime"><span>观看数：{{ item5.watchTime }}</span></span>
                    <span class="the-left-text2" v-if="item5.downloadTime"><span>下载数：{{ item5.downloadTime }}</span></span>
                  </div>
                </div>
                <div class="the-right-btn">
                  <el-button class="my-btn1" @click="like(item5)" type="primary" round>点赞</el-button>
                  <el-button class="my-btn1" @click="download(item5)" type="primary" round>下载</el-button>
                </div>
              </div>
            </div>
          </el-scrollbar>


      </div>
      <div class="the-right">
        <div class="the-right-box1">
          <div class="the-right-box1-1">
            <span>V题库会员18 项特权</span>
            <img src="@/assets/images/vip2.png">
          </div>
          <div class="the-right-box1-2">
            <span>助教专业答疑 | 精选题 | 考前点题 | 知识点视频解析</span>
          </div>
        </div>
        <div class="the-right-box2">
          <div class="the-right-box2-left" @click="goToLogin">
            <img src="@/assets/images/person.svg" v-if="!isLogin">
            <img :src="userStore.userInfo.header" v-else>
            <span v-if="!isLogin">未登录</span>
          </div>
          <div class="the-right-box2-right" @click="goResource">
            我的资料
          </div>
        </div>
        <div class="the-right-box3">
          <div>
            热门资讯
          </div>
          <div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

@media screen and (min-width: 1400px) {
  .content1{
    width: 1400px;
  }
}

.top1 {
  height: 130px;
  background: blue;
}

.content1 {

  margin: 0 auto;
  gap: 26px;
  display: flex;
}

.the-title1 {
  height: 50px;
  color: #000;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  padding: 10px 0;
  box-sizing: border-box;
}

.the-right {
  width: 345px;
  padding-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.the-left {
  flex: 1;
}

.the-box1 {
  background: white;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  min-height: 330px;
}

.the-box1 .aa {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  color: #555;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;

}

.the-box1 .aa .bb {
  width: 80px;
}

.the-box1 .aa .dd {
  padding: 2px 10px;
  cursor: pointer;
}

.the-box1 .aa .dd:hover {
  color: #409eff;
}

.the-box1 .aa .dd.active {
  border-radius: 100px;
  background: linear-gradient(180deg, #E6EFFF 0%, #FFF 100%);
  color: #409eff;
}

.the-box1 .aa .cc {
  flex: 1;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
}

.the-title2 {
  padding: 10px 0 24px;
}

.the-title2 .container1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.the-title2 .container1 .left1 {
  display: flex;
  gap: 16px;
  align-items: center;
}

.text1 {
  color: #333;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}

.text1.active {
  color: #333;
  font-size: 18px;
  font-weight: 700;
}

.scroll-container1 {
  min-height: 1150px;
  padding: 24px;
  background: white;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.scroll-container1 .flex-item {
  display: flex;
  padding: 24px 24px 24px 20px;
  align-items: start;
  gap: 8px;
}

.scroll-container1 .flex-item .the-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.scroll-container1 .flex-item .the-left .the-left-text1 {
  color: #333;
  font-size: 15.75px;
  font-weight: 700;
}

.scroll-container1 .flex-item .the-left .the-left-text2 {
  color: #888;
  font-size: 12px;
  font-weight: 400;
}

.the-left-flex {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tips1 {
  color: #3C6CFF;
  font-size: 12px;
  font-weight: 400;
  border-radius: 2px;
  background: linear-gradient(180deg, #E6EFFF 0%, #FFF 100%);
  padding: 3px;
}

.tips2 {
  color: #F51E29;
  font-size: 12px;
  font-weight: 400;
}

.the-right-btn ::v-deep(.el-button) {
  --el-color-primary: #3C6CFF;
}

.the-right-btn .my-btn1 {

  width: 92px;
  height: 36px;
}

.the-right-box1 {
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 24px;
  background-image: url("@/assets/images/vip1.png");
  background-size: cover;
  border-radius: 12px;
}

.the-right-box1-1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;

  color: transparent;
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(180deg, #EDBB91 10.94%, #FFCCA1 45.67%, #876B53 100%);
  background-clip: text;
}

.the-right-box1-1 img {
  width: 98px;
  height: 68px;
}

.the-right-box1-2 {
  color: rgba(245, 210, 181, 0.50);
  font-size: 11px;
  font-weight: 400;
}

.the-right-box2 {
  background: white;
  padding: 32px 24px;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.the-right-box3{
  background: white;
  padding: 32px 24px;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.the-right-box2-left {
  display: flex;
  gap: 16px;
  color: #333;
  font-size: 16px;
  font-weight: 700;
  align-items: center;
}

.the-right-box2-left img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.the-right-box2-right {
  cursor: pointer;
  color: #3C6CFF;
  font-size: 14px;
  font-weight: 400;
}
</style>